<template>
  <section class="exam-list" :style="{marginTop:top}">
    <section v-if="option.modubleName" class="title-more">
      <p>{{ option.modubleName }}</p>
      <span v-if="option.isMore==1" @click="goList">查看更多</span>
    </section>
    <div
      v-for="item in examList"
      :key="item.id"
      class="exam-item"
      :style="{marginLeft:spacing,marginRight:spacing}"
    >
      <section class="exam-item-name">
        <span class="etc"> {{ item.name }}</span>
      </section>
      <section class="exam-info-top">
        <section class="exam-info-value">总分值：{{ item.score }}分</section>
        <section class="exam-info-value">考试时长：{{ (item.limitTime / 60).toFixed(2) }}分钟</section>
      </section>
      <section class="exam-info">
        <section class="exam-time">
          <section class="exam-info-value">开考时间：{{ item.startTime }}</section>
          <section class="exam-info-value">结束时间：{{ item.endTime }}</section>
        </section>
        <!-- 考试状态 -->
        <section class="exam-item-status-content">
          <section
            v-if="item.examStatus == 1"
            class="exam-item-status"
            :class="{ examing: item.examStatus == 1 }"
            @click="handleGo(item)"
          >
            开始考试
          </section>
          <section v-if="item.examStatus == 0" class="exam-item-status" :class="{ wait: item.examStatus == 0 }">
            未开始
          </section>
          <section v-if="item.examStatus == 2" class="exam-item-status" :class="{ end: item.examStatus == 2 }">
            <span>已结束</span>
          </section>
        </section>
      </section>
    </div>
  </section>
</template>

<script>
import mixins from '../mixins'

export default {
  name: 'OnLineExamFixedNumberComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      areaId: '',
      search: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      /* 考试列表*/
      examList: [],
      /*      emptyType: Empty.content,*/
      isNoData: false,
      isLoadError: false,
      page: 1,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了'
    }
  },
  computed: {
    spacing() {
      return this.option.spacing ? this.option.spacing + 'px' : 0
    }
  },
  created() {
    // this.areaId = this.$route.query.areaId
    // this.getexamList()
    if (this.isInitData) {
      this.pageSize = this.option.pageSize
      this.seflLoadData()
    } else {
      this.examList = [{
        name: '测试考试1',
        getReward: '2.5',
        score: '100',
        limitTime: 1200,
        startTime: '2022/12/23',
        endTime: '2023/01/01',
        examStatus: 1
      }]
      this.finished = true
    }
  },
  methods: {
    goList() {
    },
    /**
     * 加载数据
     */
    async seflLoadData() {
      await this.getDataByCode('areaResources')
    },
    // 用于initData方法调用完设置数据
    setData(result) {
      const res = result.areaResources
      const { data } = res
      if (this.page === 1) {
        this.examList = []
      }
      this.examList.push(...data.rows)
      if (this.examList.length >= data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },

    /**
     * 刷新
     */
    refresh4other() {
      return new Promise((sesolve, reject) => {
        this.finishedText = ''
        this.finished = true
        this.page = 1
        this.examList = []
        this.seflLoadData()
        return new Promise(() => {
        })
      })
    },

    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.seflLoadData()
      } else {
        this.loading = false
      }
    },
    handleGo(item) {
      return
      // 考试详情页面
      this.$router.push({
        path: '/resourceAnswer',
        query: {
          ri: item.id,
          pi: item.passId,
          resourcesId: item.resourcesId,
          areaId: this.$route.query.areaId,
          isSaas: item.isSaas
        }
      })
    },
    // 上拉加载
    // loadList() {
    //   const ths = this
    //   this.$axios
    //     .post(URL.query, {
    //       areaId: this.areaId,
    //       type: ' ZYLX_KS',
    //       page: ths.search.page,
    //       pageSize: ths.search.pageSize
    //     })
    //     .then((res) => {
    //       ths.loading = false
    //       if (res.code && res.code === '200') {
    //         const _list = res.data.rows || []
    //         ths.examList = [...ths.examList, ..._list]
    //         if (_list.length < ths.search.pageSize || ths.examList.length >= ths.search.total) {
    //           ths.finished = true
    //           ths.finishedText = '已经到底了'
    //           return
    //         }
    //         this.search.page++
    //       }
    //     })
    //     .catch((error) => {
    //       console.log(error)
    //       ths.loading = false
    //     })
    // },
    // // 下拉刷新时触发
    // onRefresh() {
    //   // 下拉刷新
    //   setTimeout(() => {
    //     this.getexamList()
    //   }, 500)
    // },
    // // 下拉刷新
    // getexamList() {
    //   const ths = this
    //   this.$openLoading()
    //   ths.examList = []
    //   ths.search.page = 1
    //   ths.isLoadError = false
    //   ths.isNoData = false
    //   this.$axios
    //     .post(URL.query, {
    //       areaId: this.areaId,
    //       type: ' ZYLX_KS',
    //       page: ths.search.page,
    //       pageSize: ths.search.pageSize
    //     })
    //     .then((res) => {
    //       ths.isLoading = false
    //       this.$closeLoading()
    //       if (res && res.code === '200') {
    //         ths.examList = res.data.rows
    //         ths.search.total = res.data.total
    //         if (ths.examList.length > 0) {
    //           ths.search.page = 2
    //           if (ths.examList.length < ths.search.pageSize || ths.examList.length >= ths.search.total) {
    //             ths.finished = true
    //             ths.finishedText = '已经到底了'
    //           } else {
    //             ths.finished = false
    //             ths.finishedText = ''
    //           }
    //         } else {
    //           ths.finished = true
    //           ths.finishedText = ''
    //         }
    //       } else {
    //         ths.isLoadError = true
    //       }
    //     })
    //     .catch((error) => {
    //       console.log(error)
    //       ths.isLoading = false
    //       ths.isLoadError = true
    //       this.$closeLoading()
    //     })
    // },
    /**
     * 设置考试时间格式
     */
    setTime(time) {
      return time.substring(0, 16).replace('-', '/')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/utility/rem.scss';

.exam-list {
  //position: absolute;
  //// top: rem(176);
  //top: 0;
  //bottom: 0;
  //left: 0;
  //right: 0;
  .title-more {
    display: flex;
    justify-content: left;
    align-items: center;
    color: #333;
    font-size: rem(32);
    line-height: rem(70);
    padding: rem(0) rem(30);
    font-weight: bold;

    p {
      width: 80%;
      text-align: left;
    }

    span {
      text-align: right;
      font-size: rem(28);
      color: #666;
      cursor: pointer;
    }
  }

  position: relative;
  width: rem(750);
  min-height: rem(450);

  .van-pull-refresh {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.exam-item {
  margin: rem(23) rem(30) rem(30);
  padding: rem(30) rem(30) rem(26) rem(30);
  height: rem(300);
  background: rgba(255, 255, 255, 1);
  border-radius: rem(12);
  position: relative;
  box-shadow: 0 0 rem(50) 0 #f2f2f2;

  .exam-item-name {
    width: 100%;
    font-size: rem(30);
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: #363636;
    display: flex;
    justify-content: space-between;

    span:first-child {
      flex: 1;
    }
  }

  .exam-info-top {
    margin-top: rem(2);
    padding-top: rem(22);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .exam-info-value {
      font-size: rem(24);
      color: #333333;
      text-align: center;
      line-height: 1.2;
      font-family: PingFangSC-Regular;
    }
  }

  .exam-info {
    margin-top: rem(26);
    padding-top: rem(22);
    align-items: center;
    position: relative;

    &:before {
      left: 0;
      right: 0;
      width: auto;
      height: 1px;
      position: absolute;
      z-index: 0;
      top: 0;
      content: '';
      background-image: -webkit-linear-gradient(bottom, #ececec 50%, transparent 0);
      background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
    }

    .exam-time {
      position: absolute;
      min-height: 35px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .exam-info-value {
      font-size: rem(24);
      color: #333333;
      text-align: center;
      line-height: 1.2;
      font-family: PingFangSC-Regular;
    }

    .exam-item-status-content {
      position: absolute;
      display: inline-block;
      margin-top: rem(22);
      right: rem(0);
      top: rem(7);

      .exam-item-status {
        color: #fff;
        font-size: rem(22);
        width: rem(140);
        height: rem(56);
        border-radius: rem(28);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 1;
      }

      .exam-item-status.examing {
        @include bg-color($mainColor);
        background-size: rem(88) rem(36);
      }

      .exam-item-status.wait {
        background: #c2c4c7;
        background-size: rem(88) rem(36);
      }

      .exam-item-status.end {
        background: #fff;
        @include border-color(1px, solid, $mainColor);

        > span {
          @include font-color($mainColor);
        }

        background-size: rem(88) rem(36);
      }
    }
  }
}
</style>
